import {TooltipProvider} from "@/components/ui/tooltip.tsx";
import {
    NavigationMenu,
    NavigationMenuItem,
    NavigationMenuLink,
    NavigationMenuList,
    navigationMenuTriggerStyle,
} from "@/components/ui/navigation-menu"
import {Link, Outlet} from "react-router-dom";
import {ThemeToggle} from "@/components/theme-toggle.tsx";
import AutoSizablePanel from "@/components/custom-ui/auto-sizable-panel.tsx";

/**
 * 应用框架
 * @constructor
 */
export default function AppFrame() {

    return (
        <TooltipProvider delayDuration={0}>
            <div className="w-screen h-screen flex flex-col">
                <NavigationBar/>
                <AutoSizablePanel className={"flex-auto overflow-hidden"}>
                    {
                        (size) => (
                            <div style={{...size}} className={"overflow-y-auto"}>
                                <Outlet/>
                            </div>
                        )
                    }
                </AutoSizablePanel>
            </div>
        </TooltipProvider>
    )
}

/**
 * 导航栏
 * @constructor
 */
function NavigationBar() {
    return (
        <div className={"flex flex-row items-center h-14 border-b px-2"}>
            <div>
                鸾鸟
            </div>
            <div className={"flex-auto flex flex-row justify-center"}>
                <NavigationMenu>
                    <NavigationMenuList>
                        <NavigationMenuItem>
                            <Link to="/knowledge-base">
                                <NavigationMenuLink className={navigationMenuTriggerStyle()}>
                                    知识库
                                </NavigationMenuLink>
                            </Link>
                        </NavigationMenuItem>
                    </NavigationMenuList>
                </NavigationMenu>
            </div>

            <div>
                <ThemeToggle/>
            </div>
        </div>
    )
}